<script setup lang="ts">
import { useTracking } from '@/business/tracking'
import type { ComputedRef } from 'vue'
import { computed, ref, watch } from 'vue'

// const props = defineProps<{ customMode: number | undefined }>()
interface MenuItem {
  title: string
  modeValue: number
  event?: () => void
}
const tracking = useTracking()

const menuItems: ComputedRef<MenuItem[]> = computed(() => [
  {
    title: '手动',
    modeValue: -1
  },
  {
    title: '自动',
    modeValue: 1
  },
  {
    title: '半自动',
    modeValue: 0
  }
])
watch(
  () => tracking.trackingState,
  (val) => {
    modeRadio.value = val
  }
)

const modeRadio = ref<number | undefined>()
</script>

<template>
  <div class="flex items-center text-sm py-2">
    <span class="whitespace-nowrap flex-shrink-0">跟踪模式：</span>
    <el-radio-group v-model="modeRadio">
      <el-radio
        size="small"
        v-for="item in menuItems"
        :key="item.modeValue"
        :label="item.title"
        :value="item.modeValue"
        @change="tracking.changeTrackingState"
      >
        {{ item.title }}
      </el-radio>
    </el-radio-group>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}
</style>
